import React, {Component,Fragment} from 'react';
import { Scroller, Touchable, List } from '$yo-component';
import yoHistory from '$common/history';
import axios from 'axios';

import './index.scss';

class Detail2 extends Component {
    constructor(props){
        super(props)
        this.state={
            zIndex:1,
            detailHead:{
                title: '',
                memo: 'fdfr',
                headImage:''
            },
            userInfo:{
                userId:'',
                userImg:''
            },
            dataSource: [],
            txts: [
                {name:"来京东必体验", key:1},
                {name:"来东京不能错过的五大博物馆",key:2},
                {name:"动漫成真的朝圣地",key:3},
                {name:"东京经典赏樱花地推荐",key:4},
                {name:"更多精彩东京聪游榜",key:5}
            ]
        }
    }
    handleScroll(ev){
        let num=1;
        if(Math.abs(ev.contentOffset.y)>5){
            num=9;
        }else {
            num=1;
        }
        this.setState(()=>({
            zIndex: num
        }))
    }
    handleOnFresh(){
        this.setState(()=>({
            zIndex: 1
        }))
    }
    render (){
        let aa= this.state.zIndex == 1? "icon-top icon-top-index1": "icon-top icon-top-index2"
        return (
            <div className="yo-flex">
                <div className={aa}>
                    <span className="detail-title">{this.state.detailHead.title}</span>
                </div>
                <div className="detail-back-btn">
                    <Touchable
                        touchClass={'touch-active'}
                        onTap={()=>{
                            yoHistory.push('/')
                        }}
                    >
                        <span className="back">返回</span>
                    </Touchable>
                    <span className="love">收</span>
                    <span className="share">转</span>
                </div>
                <div className="detail-s-wrap">
                <Scroller
                    scrollX={false}
                    scrollY={true}
                    extraClass={'yo-scroller-fullscreen'}
                    ref="scroller"
                    usePullRefresh={true}
                    onRefresh={()=>{
                        setTimeout(()=>{
                            this.handleOnFresh();
                            this.refs.scroller.stopRefreshing(true);
                        },500)
                    }}
                   useLoadMore={true}
                   //  onLoad={()=>{
                   //      this.refs.scroller.stopLoading(true)
                   //  }}
                    onScroll={(ev)=>this.handleScroll(ev) }
                >
                {/*detail-top 可封装为一个组件*/}
                <div className="detail-top">
                    <div className="detail-top-info">
                        <img src={this.state.detailHead.headImage} alt=""/>
                        <p>{this.state.detailHead.title}</p>
                    </div>
                    <div className="detail-user">
                        <img src={this.state.userInfo.userImg} alt=""/>
                        <span>{this.state.userInfo.userId}</span>
                    </div>
                    <div className="detail-caption">
                        <p>{this.state.detailHead.memo?this.state.detailHead.memo:null}</p>
                    </div>
                </div>

                <div className="detail-img-list">
                    {
                        this.state.dataSource.map((item,index)=>{
                            return (
                                <div className="detail-img-item" key={item.id}>
                                    {
                                        item.images?
                                            <Fragment>
                                                <img src={item.images[0].url} alt=""/>
                                                <p className="name-price">
                                                <span className="view-name">{item.name}</span>
                                                <span className="view-price">{item.price}</span>
                                                </p>
                                                <p className="view-review">{item.memo}</p>
                                            </Fragment>
                                        : ''
                                    }
                                </div>
                            )
                        })
                    }
                </div>

                <div className="detail-btn">
                    <a className={'yo-btn one-btn'} href="#">东京</a>
                    <a className={'yo-btn two-btn'} href="#">景点</a>
                </div>

                <div className="detail-split"></div>

                <div className="detail-footer">
                    <List
                        staticSection={<h2 className="title">大家都在看</h2>}
                        extraClass={'yo-list-fullscreen'}
                        dataSource={this.state.txts}
                        renderItem={(item,index)=>{
                            return (
                                <p className="detail-footer-txt" key={index}>{item.name}</p>
                            )
                        }}
                        disabled={true}
                    />
                </div>

                </Scroller>
                </div>
            </div>
        )
    }

    componentDidMount(){
        // 获取点击的图片id
        let myId= this.props.params.id
        //console.log(myId)
        axios.get('http://127.0.0.1/api/book/'+myId).then((response)=>{
            console.log(response.data.data)
            //if(response.data.data.book.travelBookDayList[0].elementList.length>0){
                let res=response.data.data.book.travelBookDayList[0].elementList;
                let detailHead=response.data.data.book;
                let userInfo=response.data.data.owner;
                let data=res;
                this.setState(()=>{
                     return {
                         dataSource: data,
                         userInfo: {
                             userId:userInfo.userId,
                             userImg: userInfo.headImg
                         },
                         detailHead: {
                             title: detailHead.title,
                             memo: detailHead.memo,
                             headImage: detailHead.headImage
                         }
                     }
                },()=>{
                    //console.log(this.state.detailHead)
                });
            //}
        })
    }

}

export default Detail2;
